<template>
  <div class="password">
    <div class="add-box">

            <ul class="list">
              <li class="clearFix">
                <div class="fl left">
                  <em>旧密码</em>
                  <input type="password" name="phone" v-model="oldpass" placeholder="请输入您的旧密码" />

                </div>
              </li>
              <li class="clearFix">
                <div class="fl left">
                  <em>新密码</em>
                  <input type="password" name="phone" v-model="newpass" placeholder="请输入您的新密码" />

                </div>
              </li>
              <li class="clearFix">
                <div class="fl left">
                  <em>确认新密码</em>
                  <input type="password" name="phone" v-model="repnewpass" placeholder="请再次输入您的新密码" />
                </div>
              </li>

            </ul>
            <p class="error">两次输入密码要保持一致</p>

        <div class="next-btn">
          <mt-button type="danger" size="large" v-on:click="changePass">确认</mt-button>
        </div>


    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
  name: 'PassWord',
  data () {
    return {
      oldpass: '',
      newpass: '',
      repnewpass: ''
    }
  },
  methods:{
    changePass:function(){
      if(this.oldpass == ''){

        Toast('旧密码不能为空');
        return;
      }

      if(this.newpass == ''){
        Toast('新密码不能为空');
        return;
      }

      if(this.repnewpass == ''){
        Toast('再次输入的密码不能为空');
        return;
      }

      var ajaxData = {};
      ajaxData.old_password = this.oldpass;
      ajaxData.new_password = this.newpass;
      ajaxData.confirm_password = this.repnewpass;
      ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      $.ajax({
        type:'post',
        url: RouteMap.changePass,
        data: ajaxData,
        success:function(res){
          if(res.code == 200){

            Toast('密码修改成功,请重新登录');
            setTimeout(function(){
              sessionStorage.user = '';
              _this.$router.push('/login2');
            },1000)


          }
          else{
            //Toast(res.msg)
          }
        }
      })

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.password{
  font-size: 0.6rem;
  padding: 1rem 1rem;
}
.list {
  background:#fff;
  width:100%;
  box-sizing:border-box;
  margin-top:.3rem;
  padding:0 .5rem;
  font-size:.6rem;
}
input::-webkit-input-placeholder{
  color: #bcbcbc;
}


.list li{
    border-bottom:1px solid #c0c0c0;
    line-height:2rem;

}
.list li .left em{
    padding-right:.4rem;
    color:#1c1c1c;
    display: inline-block;
    width: 3rem;
}
.list li .left input{
  font-size:.6rem;
  color:#ccc;
  width: 9rem;
}
.btn2{
    background:#aaa;
    width:50%;
    height:2rem;
    text-align:center;
    margin-left:25%;

    margin-top:2rem;
    border-radius:.3rem;
}

.error{
    line-height:2rem;
    padding-left:.4rem;
    color:red;
    display: none;
}
</style>
